<template>
  <div v-if="cartList.length > 0" class="cart-container">
    <!-- 商铺 -->
    <div class="shop">
      <van-icon name="shop-o" />
      <span class="shop-name">嗨购商城</span>
    </div>

    <van-swipe-cell v-for="item in cartList" :key="item.proid">
      <div class="goods-cell">
        <!-- 左边是checkbox -->
        <van-checkbox
          class="checkbox"
          v-model="item.checked"
          checked-color="#c82519"
          @change="changeState($event, item.proid)"
        ></van-checkbox>
        <!-- 卡片组件 -->
        <van-card class="goods-card" :title="item.proname" :thumb="item.img">
          <template #price>
            <span style="color: red; font-size: 16px"
              >￥{{ item.price | formatPrice }}</span
            >
          </template>
          <template #num>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
              @change="changeNum($event, item.proid)"
            />
          </template>
        </van-card>
      </div>
      <template #right>
        <van-button
          style="height: 100%"
          square
          type="danger"
          text="删除"
          @click="asyncDelete(item.proid)"
        />
      </template>
    </van-swipe-cell>
    <van-submit-bar
      :price="getTotalPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
      :disabled="getTotalPrice === 0"
    >
      <!--
        checked 必须是一个计算属性的完整写法
         -->
      <van-checkbox v-model="checked">全选</van-checkbox>
      <!-- <van-checkbox :value="isAllChecked" @click="allSelect">全选</van-checkbox> -->
    </van-submit-bar>
  </div>
  <van-empty
    v-else
    image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
    description="购物车是空的，快去挑选好货"
  />
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['getTotalPrice', 'isAllChecked']),
    // 这种写法只是实现了get，没有完整实现
    // checked() {
    //   return this.isAllChecked
    // }
    checked: {
      get () {
        return this.isAllChecked
      },
      set (checked) {
        this.allSelectOrNot(checked)
      }
    }
  },
  methods: {
    ...mapMutations('cart', [
      'updateGoodsState',
      'updateGoodsNum',
      'allSelectOrNot'
    ]),
    ...mapActions('cart', ['asyncDelete']),
    // 更改状态
    changeState (checked, proid) {
      this.updateGoodsState({ proid, checked })
    },
    // 更改数量
    changeNum (num, proid) {
      this.updateGoodsNum({
        proid,
        num
      })
    },
    allSelect () {
      this.allSelectOrNot(!this.isAllChecked)
    },
    onSubmit () {}
  }
}
</script>

<style lang="scss" scoped>
.van-empty {
  padding-top: 200px;
}

::v-deep(.van-empty__image) {
  width: 80px;
  height: 80px;
  img {
    width: 80px;
    height: 80px;
  }
}
.cart-container {
  padding-bottom: 100px;
  overflow: auto;
  height: calc(100vh - 100px);

  .shop {
    background-color: white;
    border-bottom: 1px solid #edeeed;
    padding: 5px 10px;
    .shop-name {
      margin-left: 5px;
      font-size: 14px;
      color: #3f3f3f;
    }
  }
  .goods-cell {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #edeeed;
    // height: 100%;
    height: 127px;
    align-items: center;
    .checkbox {
      width: 40px;
      height: 100%;
      line-height: 100%;
      justify-content: center;
    }

    .goods-card {
      flex: 1;
      margin: 0;
      background-color: white;
    }
  }

  .delete-button {
    height: 100%;
  }
  ::v-deep .van-submit-bar {
    background: hsla(0, 0%, 100%, 0.95);
    bottom: 50px;
  }
}
// 去除滚动条
.cart-container::-webkit-scrollbar {
  width: 0 !important;
}
</style>
